<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_深度监视</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        深度监视：
            (1).Vue中的watch默认不监测对象内部值的改变(一层)
            (2).配置deep: true可以监测对象内部值改变(多层)
        备注：
            (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
            (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
    -->
    <div id="root">
      <h2>今天天气很{{isHot ? '炎热' : '寒冷'}}</h2>
      <button @click="isHot = !isHot">点我切换天气</button>
      <hr />
      <h3>a的值是{{numbers.a}}</h3>
      <button @click="numbers.a++">点我让a+1</button>
      <h3>b的值是{{numbers.b}}</h3>
      <button @click="numbers.b++">点我让b+1</button>
      <button @click="numbers = {a: 666, b: 888}">彻底替换掉numbers</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
        numbers: {
          a: 1,
          b: 1,
          c: {
            d: {
              e: 1,
            },
          },
        },
      },
      watch: {
        isHot: {
          // immediate: true,
          handler(newValue, oldValue) {
            console.log("idHot被改了", newValue, oldValue);
          },
        },
        // 监视多级结构中某个属性的变化
        /* 'numbers.a': {
                handler() {
                    console.log('a被改了')
                }
            }, */
        // 监视多级结构中**所有**属性的变化
        numbers: {
          deep: true,
          handler() {
            console.log("numbers被改了");
          },
        },
      },
    });
  </script>
</html>
